import { userRegisterUsingPost } from '@/services/openAPI-backend/userController';
import {
  LockOutlined,
  MobileOutlined,
  UserOutlined,
  MailOutlined,
} from '@ant-design/icons';
import {LoginForm, ProFormCaptcha,  ProFormText} from '@ant-design/pro-components';
import { FormattedMessage, Helmet,  history, useIntl } from '@umijs/max';
import {  Modal, message,Card,Row, Col } from 'antd';
import React, { useState } from 'react';
import Settings from '../../../../config/defaultSettings';
import {sendSimpleMessageUsingPost} from "@/services/openAPI-backend/fasongyoujianjiekou";
import {keyframes} from "antd-style";
const { confirm } = Modal;
const fadeAndScaleIn = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
      `;
const Register: React.FC = () => {
  const intl = useIntl();
  const [currentPhoneNumber, setCurrentPhoneNumber] = useState<string>();

  const handleSubmit = async (values: API.UserRegisterRequest) => {
    try {
      // 注册
      const res = await userRegisterUsingPost({ ...values });
      if (res.data) {
        confirm({
          title: '注册成功，是否去登录',
          okText: '确定',
          cancelText: '取消',
          open: true,
          onOk() {
            history.push('/user/login');
          },
          onCancel() {
            return;
          },
        });
      }
    } catch (error) {
      const defaultLoginFailureMessage = intl.formatMessage({
        id: 'pages.login.failure',
        defaultMessage: '注册失败，请重试！',
      });
      console.log(error);
      message.error(defaultLoginFailureMessage);
    }
  };

  return (
    <div
    style={{
      height: '100vh',
      width: '100%',
      backgroundPosition: 'center',
      backgroundRepeat: 'no-repeat',
      backgroundSize: '100% auto',
      animation: `${fadeAndScaleIn} 1s ease-in-out`,
      backgroundImage:
        'url(https://openapi--bucket.oss-cn-beijing.aliyuncs.com/3d41f709296743ab1755c6070d941306.jpg)',
    }}
    >
      <Helmet>
        <title>
          {intl.formatMessage({
            id: 'menu.register',
            defaultMessage: '注册页',
          })}
          - {Settings.title}
        </title>
      </Helmet>
      <div
        style={{
          flex: '1',
          padding: '32px 0',

        }}
      >
        <Card style={{ marginTop:100,height:'100%',width:'60%',margin:'0 auto',backgroundImage:'url(https://pic3.zhimg.com/v2-09673cc4e1174a4c77e32ee1237bc46e_r.jpg)',}}>
         <Row gutter={0}>
           <Col span={12}><Card style={{display:'flex',justifyContent:'center',alignItems:'center',height:'100%',width:'100%',borderRadius:'20px',backgroundSize:'100% 5000%',borderRadius:'20px',
             backgroundRepeat:'no-repeat',backgroundImage:'url(https://tse3-mm.cn.bing.net/th/id/OIP-C.8GE8CYOybbAGymLLvV7KcAHaNK?rs=1&pid=ImgDetMain)'
           }} ><p style={{fontSize:'80px',fontWeight:'bold',color:'white',textAlign:'center'}}>E-API</p><br/>
         <p style={{fontSize:'64px',fontWeight:'bold',color:'white',textAlign:'center'}}>简单轻量的调用体验</p></Card>
           </Col>
           <Col span={12}>
             <Card style={{width:'100%',height:'100%',borderRadius:'20px',backgroundSize:'100% 5000%',borderRadius:'20px',}}>
          <LoginForm
          contentStyle={{
            minWidth: 280,
            maxWidth: '75vw',
          }}
          submitter={{
            searchConfig: {
              submitText: '注册',
            },
            submitButtonProps: {
              style: {
                width: '100%',
              },
            },
            resetButtonProps: false,
          }}
          // logo={<img alt="logo" src="/logo.svg" />}
          title="E-API Platform"
          subTitle={intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
          onFinish={async (values) => {
            await handleSubmit(values as API.UserRegisterRequest);
          }}
        >
          <>
            <ProFormText
              name="userAccount"
              fieldProps={{
                size: 'large',
                prefix: <UserOutlined />,
              }}
              placeholder={intl.formatMessage({
                id: '1',
                defaultMessage: '用户名',
              })}
              rules={[
                {
                  required: true,
                  message: <FormattedMessage id="1" defaultMessage="请输入用户名!" />,
                },
              ]}
            />
            <ProFormText.Password
              name="userPassword"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined />,
              }}
              placeholder={intl.formatMessage({
                id: '1',
                defaultMessage: '密码',
              })}
              rules={[
                {
                  required: true,
                  message: <FormattedMessage id="1" defaultMessage="请输入密码！" />,
                },
              ]}
            />
            <ProFormText.Password
              name="checkPassword"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined />,
              }}
              placeholder={intl.formatMessage({
                id: '1',
                defaultMessage: '确认密码',
              })}
              rules={[
                {
                  required: true,
                  message: <FormattedMessage defaultMessage="请再次输入密码" />,
                },
              ]}
            />
            <ProFormText
              name="userPhone"
              fieldProps={{
                size: 'large',
                prefix: <MobileOutlined />,
              }}
              placeholder={intl.formatMessage({
                id: '1',
                defaultMessage: '请输入手机号',
              })}
              rules={[
                {
                  required: true,
                  message: <FormattedMessage defaultMessage="请输入手机号！" />,
                },
              ]}
            />
            <ProFormText
              fieldProps={{
                size: 'large',
                prefix: <MailOutlined />,
              }}
              name="emailAddress"
              placeholder={intl.formatMessage({
                id: '1',
                defaultMessage: '请输入邮箱',
              })}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="1"
                      defaultMessage="请输入邮箱！"
                    />
                  ),
                },
              ]}
            />
            <ProFormCaptcha
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined />,
              }}
              captchaProps={{
                size: 'large',
              }}
              // 手机号的 name，onGetCaptcha 会注入这个值
              phoneName="emailAddress"
              name="identifyCode"
              rules={[
                {
                  required: true,
                  message: '请输入验证码',
                },
              ]}
              placeholder="请输入验证码"
              // 如果需要失败可以 throw 一个错误出来，onGetCaptcha 会自动停止
              // throw new Error("获取验证码错误")
              onGetCaptcha={async (phone) => {
                await sendSimpleMessageUsingPost({
                 sendTo: phone,
                })
                message.success(` ${phone} 验证码发送成功!`);
              }}
            />
          </>
        </LoginForm>
             </Card>
           </Col>
         </Row>

        </Card>
      </div>
    </div>
  );
};

export default Register;
